<script type="text/x-template" id="audio-settings">
    <template>
        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioSettings = false"
             @contextmenu.self="app.modals.audioSettings = false">
            <div class="modal-window">
                <div class="modal-header">
                    <div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
                    <button class="close-btn" @click="app.modals.audioSettings = false"
                            :aria-label="app.getLz('action.close')"></button>
                </div>
                <div class="modal-content">
                    <button class="playlist-item"
                            @click="openEqualizer()" style="width:100%;">
                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
                        <div class="name">{{app.getLz('term.equalizer')}}</div>
                    </button>
                    <button class="playlist-item"
                            @click="openAudioControls()" style="width:100%;">
                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
                        <div class="name">{{app.getLz('term.audioControls')}}</div>
                    </button>
                    <button class="playlist-item"
                            @click="openAudioPlaybackRate()" style="width:100%;">
                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
                        <div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
                    </button>
                    <button class="playlist-item"
                            @click="$root.openSettingsPage('audiolabs')" style="width:100%;">
                        <div class="icon"><%- include("../svg/speaker.svg") %></div>
                        <div class="name">{{app.getLz('settings.option.audio.audioLab')}}</div>
                    </button>
                </div>
            </div>
        </div>
    </template>
</script>

<script>
  Vue.component('audio-settings', {
      template: '#audio-settings',
      data: function() {
        return {
          app: this.$root,
        }
      },
      props: {},
      mounted() {
      },
      methods: {
        openEqualizer() {
          app.modals.equalizer = true
          app.modals.audioSettings = false
        },
        openAudioControls() {
          app.modals.audioControls = true
          app.modals.audioSettings = false
        },
        openAudioPlaybackRate() {
          app.modals.audioPlaybackRate = true
          app.modals.audioSettings = false
        },
      },
    }
  );
</script>
